// SCSS测试文件

// 变量定义
$primary-color: #007bff;
$secondary-color: #6c757d;
$spacing: 10px;
$font-size-base: 16px;

// 错误：变量名不符合命名规范（不是kebab-case）
$invalidVarName: 20px;

// 嵌套规则
.scss-container {
  max-width: 1200px;
  padding: $spacing;

  &__header {
    font-size: $font-size-base * 1.5;
    color: $primary-color;

    // 过深嵌套（可能触发max-nesting-depth）
    & > .title {
      font-weight: bold;

      &-text {
        text-decoration: underline;

        &:hover {
          color: darken($primary-color, 10%);
        }
      }
    }
  }

  // 空块（可能触发block-no-empty）
  &__empty {
  }
}

// mixin定义
@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: $spacing;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// mixin使用
.btn {
  @include button-style($primary-color, white);

  // 错误：使用无效的颜色函数
  &--secondary {
    @include button-style(lighten($secondary-color, 5%), black);
  }

  // 错误：冗余选择器
  & {
    display: inline-block;
  }
}

// 错误：选择器类型限定符
button.btn {
  font-weight: bold;
}

// 媒体查询
@media (width <= 768px) {
  .scss-container {
    padding: $spacing / 2;
  }
}

// 错误：无用的嵌套
.card {
  & .card-body {
    padding: $spacing;
  }
}

// 错误：@import带下划线
@import '_variables';

// 循环
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}
